<template>
  <div class="element-side-selector">
    <div class="selector-header">
      <Icon class="header-icon" icon="fa-solid:laptop"/>
      <text class="header-text">布局组件</text>
<!--      <text class="header-tip">拖拽组件进入布局区</text>-->
    </div>
    <!--  卡片列表-->
    <div v-for="group in groupList" :key="group.value" class="group-zone">
      <div class="group-title">
        {{ group.label }}
      </div>
      <div class="group-list">
        <ElementIcon
          v-for="element in group.children" :key="element.id" class="list-item" :icon="element.image"
          :label="element.name" @click="handleClickElement(element)"/>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import ElementIcon from "@/views/yz/element/ElementIcon.vue";
import * as ElementApi from '@/api/yz/element'
import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 100,
  name: undefined,
  type: undefined,
  createTime: [],
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ElementApi.getElementPage(queryParams)
    list.value = data.list
    // 先按排序值倒序排序，在按ID顺序排序
    list.value = list.value.sort((a, b) =>(b.sort || 0) - (a.sort || 0) || (a.id - b.id))
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// 分组类型，同时包含对应的图元
const groupList = computed(() => {
  const dictList = getStrDictOptions(DICT_TYPE.LAYOUT_ELEMENT_TYPE)
  return dictList.map(dict => {
    const children = list.value.filter(ele => ele.type === dict.value)
    return {
      ...dict,
      children
    }
  });
})


/** 初始化 **/
onMounted(() => {
  getList()
})
const emits = defineEmits(['elementClick'])
// 点击元素，通知父组件元素被点击
const handleClickElement = (element) => {
  emits('elementClick', element)
}
</script>

<style scoped lang="scss">
.element-side-selector {
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;

  .selector-header {
    height: 72px;
    display: flex;
    align-items: center;
    border-bottom: 1px #F3F3F8 solid;
  }

  .header-icon {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: #B0BEE6;
  }

  .header-text {
    margin-right: 16px;
    color: #555A7A;
    font-weight: bold;
    font-size: 18px;
  }

  .header-tip {
    color: #555A7A;
    font-size: 14px;
  }

  .group-zone {
    padding: 16px 0;
  }

  .group-title {
    color: #B0BEE6;
  }

  .group-list {
    display: flex;
    flex-wrap: wrap;
  }
  .list-item {
    margin: 8px 6px;
  }
}
</style>
